【js】for、forEach、map数组遍历性能比较 | 您所在的位置:网站首页 › es6 map 遍历 › 【js】for、forEach、map数组遍历性能比较 |
原文链接:https://blog.csdn.net/qq24357165/article/details/82748976 先上结果:遍历时间上 for循环遍历 < for…of遍历 < forEach遍历 < for…in遍历 < map遍历。 背景常用的数组遍历方式有很多,如最经典的for循环 for (var i = 0; i < arr.length; i++) {}再者有了for…in for (var i in arr) {}forEach arr.forEach(function (i) {});map arr.map(function (i) {});然后ES6有了更为方便的for…of for (let i of arr) {}此篇不考虑作用差异,仅对这些方式的性能做一次比较。 注:filter、every、some跟forEach/map相近,不常用所以本次不加入比较。 1.对比方案本次采用最直观的方式进行对比:通过对高数量级数组的遍历时间进行比较。 1.1 数组arr:let arr = []; for (let i = 0; i < 10000000; i++) { arr[i] = i; } console.log(arr); // [0, 1, 2, 3, ... , 9999999]1.2 对比函数:function getAverageTime (cb) { let _start = +new Date(); for (let k = 0; k < 20; k++) { cb(); // 遍历函数 } return (+new Date() - _start) / 20 + 'ms' }其中cb为遍历函数。我们通过20次求平均值的方式来推算遍历的时间,以此作为比较依据。 2.比较1.1 经典的for循环遍历getAverageTime(function () { for (let i = 0; i < arr.length; i++) { let item = arr[i]; // ... } })结果:6.3ms 1.2 for…in遍历getAverageTime(function () { for (let i in arr) { let item = arr[i]; // ... } })结果:1539.45ms 1.3 forEach遍历getAverageTime(function () { arr.forEach(item => {}) });结果:190.75ms 1.4 map遍历getAverageTime(function () { arr.map(item => {}) });结果:2014.65ms 1.5 for…of遍历getAverageTime(function () { for (let item of arr) { // ... } });结果:129.5ms *babel转ES5后遍历for…of是ES6语法,所以日常页面中基本会babel转换,所以需要测试一下转换后的遍历 getAverageTime(function () { var _iteratorNormalCompletion = true; var _didIteratorError = false; var _iteratorError = undefined; try { for (var _iterator = arr[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) { //... var item = _step.value; } } catch (err) { _didIteratorError = true; _iteratorError = err; } finally { try { if (!_iteratorNormalCompletion && _iterator.return) { _iterator.return(); } } finally { if (_didIteratorError) { throw _iteratorError; } } } });结果:105.9ms (是不是感觉for…of经过Babel转换后的代码很诡异,有兴趣可以去了解下Symbol对象,其实Symbol对象也是ES6所新加的,只是兼容比for…of好些,要兼容低版本手机的话了解一下es-symbol) 3 结果分析通过对比可知,遍历时间 for循环遍历 < for...of遍历 < forEach遍历 < for...in遍历 < map遍历3.1 *为何for… in会慢?因为for … in语法是第一个能够迭代对象键的JavaScript语句,循环对象键({})与在数组([])上进行循环不同,引擎会执行一些额外的工作来跟踪已经迭代的属性。 因此可以大致可以得出以下几点: 数据量大时,遍历性能的差距尤为明显;for系遍历总体性能好于forEach、map等数组方法你大爷毕竟是你大爷,性能最佳的还是经典的for循环遍历forEach性能优于mapfor…of要兼容低版本设备的话还是算了遍历的性能可以作为以后开发的参考,毕竟数据量不大的时候差异可忽略不计,更多的可以根据实际作用来考虑遍历方式,比方说for系遍历可以break中途退出而forEach/map不行。 版权声明:本文为CSDN博主「MichealWayne」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。原文链接:https://blog.csdn.net/qq24357165/article/details/82748976 |
CopyRight 2018-2019 实验室设备网 版权所有 |